import React from "react";
import { Tabs, List, WhiteSpace } from "antd-mobile";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import _ from "lodash";
import moment from "moment";
import Container from "../components/Base/Container";
import ReactEcharts from "../components/Base/Echarts";
import FilterControl from "../components/Base/FilterControl";
import styles from "./statSGC.less";
import { fetchStatSGC } from "../services/statService";

const ListItem = List.Item;

/**
 * 统计图：
 * 近6个月的单客贡献
 */
class StatSGC extends React.Component {
  constructor(props) {
    super();

    const shopId = props.shopId;
    const branchNo = props.branchNo[0];

    this.state = {
      shopId: shopId,
      branch_no: branchNo,
      data: []
    };
  }
  getOption3 = () => {
    if (!_.isArray(this.state.data) || this.state.data.length <= 0) {
      return;
    }

    let data = _(this.state.data).reverse();

    let x = [];
    let y = [];

    data.forEach(d => {
      x.push(d.x);
      y.push(d.y);
    });
    
    const option = {
      title: {
        // text: '',
      },
      color: ["#6aa7da", "#ffc000"],
      tooltip: {
        trigger: "axis",
        formatter: "单客贡献：{c0}元"
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40
      },
      legend: {
        data: ["贡献", "客单价", "客单量"]
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: x,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          position: "left",
          // splitLine: {show: false},
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin:0,
            // showMinLabel:false
          }
        }
      ],
      series: [
        {
          name: "单客贡献",
          type: "line",
          label: {
            normal: {
              show: false
            }
          },
          lineStyle: {
            normal: {
              width: 1.5

              /*shadowColor: 'rgba(0,0,0,0.4)',
                  shadowBlur: 5,
                  shadowOffsetY: 5,*/
            }
          },
          data: y
        }
      ]
    };

    return <ReactEcharts option={option} />;
  };

  componentDidMount() {
    console.log("shopId", this.state.shopId);
    console.log("branch_no", this.state.branch_no);
    fetchStatSGC(this.state.shopId, this.state.branch_no).then(res => {
      console.log(res);

      this.setState({
        data: res.data
      });
    });
  }

  componentWillReceiveProps(nextProps) {
    let branch_no = this.props.stat.branchPickerValue[0];
    const shopId = this.state.shopId;

    console.log("branch_no", branch_no);
    console.log("this.state.branch_no", this.state.branch_no);

    if (
      _.isString(branch_no) &&
      branch_no.length > 0 &&
      this.state.branch_no != branch_no
    ) {
      console.log("fetchStatSGC");

      fetchStatSGC(shopId, branch_no).then(res => {
        this.setState({
          data: res.data
        });
      });

      this.setState({
        branch_no: branch_no
      });
    }
  }

  render() {
    return (
      <List renderHeader={() => "近6个月的单客贡献"}>
        <ListItem>{this.getOption3()}</ListItem>
      </List>
    );
  }
}

export default connect((state, props) => {
  return {
    stat: state.stat
  };
})(StatSGC);
